<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}

			.box {
				position: relative;
				margin: 50px auto;
				width: 1000px;
				height: 437.5px;
				background-color: skyblue;
			}

			.box1 {
				position: relative;
				width: 1000px;
				height: 437.5px;
				overflow: hidden;
			}

			.box2 {
				position: relative;
				width: 700%;
				height: 437.5px;
			}

			.item {
				float: left;
			}

			.pic {
				width: 1000px;
				height: 437.5px;
			}

			.prev {
				position: absolute;
				left: 10px;
				top: 45%;
				width: 50px;
				height: 50px;
				border-radius: 100%;
				background-color: rgba(255, 255, 255, .6);
				display: none;
			}

			.next {
				position: absolute;

				right: 10px;
				top: 45%;
				width: 50px;
				height: 50px;
				border-radius: 100%;
				background-color: rgba(255, 255, 255, .6);
				display: none;
			}

			.prev img {
				width: 50px;
				height: 50px;
			}

			.next img {
				width: 50px;
				height: 50px;
			}

			.cir-list {
				text-align: center;
				position: absolute;
				bottom: 10px;
				left: 40%;
				width: 200px;
				background-color: rgba(255, 255, 255, .6);
				border-radius: 50px;
			}

			.circle {
				margin-top: 7px;
				width: 25px;
				height: 30px;
				display: inline-block;
				background: url(img/泡芙.png) no-repeat;
				background-size: 25px;
				cursor: pointer;
			}

			.guodong {
				margin-top: 7px;
				width: 25px;
				height: 30px;
				display: inline-block;
				background: url(img/果冻.png) no-repeat;
				background-size: 25px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1">
				<ul class="box2">
					<li class="item"><img class="pic" src="img/newBanner01.png" alt=""></li>
					<li class="item"><img class="pic" src="img/newBanner02.png" alt=""></li>
					<li class="item"><img class="pic" src="img/newBanner03.png" alt=""></li>
					<li class="item"><img class="pic" src="img/newBanner04.png" alt=""></li>
					<li class="item"><img class="pic" src="img/newBanner05.png" alt=""></li>
					<li class="item"><img class="pic" src="img/newBanner06.png" alt=""></li>
					<li class="item"><img class="pic" src="img/newBanner01.png" alt=""></li>
				</ul>
				<div class="prev"><img src="img/上一个.png" alt=""></div>
				<div class="next"><img src="img/下一个.png" alt=""></div>
			</div>
			<div class="cir-list">
				<span class="circle guodong"></span>
				<span class="circle"></span>
				<span class="circle"></span>
				<span class="circle"></span>
				<span class="circle"></span>
				<span class="circle"></span>
			</div>
		</div>
		<script src="utils.js"></script>
		<script>
			var box2 = document.getElementsByClassName('box2')[0];
			var box1 = document.getElementsByClassName('box1')[0];
			var item = document.getElementsByClassName('item');
			var prev = document.getElementsByClassName('prev')[0];
			var next = document.getElementsByClassName('next')[0];
			var cirList = document.getElementsByClassName('cir-list')[0];
			var circle = document.getElementsByClassName('circle');
			var index = 0;
			var clrindex = 0;
			var aaa;

			function lunbo() {
				aaa = setInterval(function() {
					console.log(index);
					index++;
					clrindex++;
					if (index >= item.length) {
						index = 1;
						box2.style.left = '0px';
					}
					if (clrindex == circle.length) {
						clrindex = 0;
					}
					initColor(circle);
					circle[clrindex].className = 'circle guodong';
					var a = -1000 * index;
					slowMoveAnima(box2, a);
				}, 3000)
			}
			lunbo();
			cirList.onmouseover = box1.onmouseover = function(e) {
				prev.style.display = 'block';
				next.style.display = 'block';
				clearInterval(aaa);
			}
			cirList.onmouseout = box1.onmouseout = function(e) {
				prev.style.display = 'none';
				next.style.display = 'none';
				lunbo();
			}
			next.onclick = function(e) {
				clearInterval(aaa);
				index++;
				clrindex++;
				if (index >= item.length) {
					index = 1;
					box2.style.left = '0px';
				}
				if (clrindex == circle.length) {
					clrindex = 0;
				}
				initColor(circle);
				circle[clrindex].className = 'circle guodong';
				var a = -1000 * index;
				slowMoveAnima(box2, a);
			}
			prev.onclick = function(e) {
				clearInterval(aaa);
				if (index <= 0) {
					index = item.length - 1;
					box2.style.left = -1000 * index + 'px';
				}
				index--;
				clrindex--;
				if (clrindex < 0) {
					clrindex = circle.length - 1;
				}
				initColor(circle);
				circle[clrindex].className = 'circle guodong';
				var a = -1000 * index;
				slowMoveAnima(box2, a);
			}

			function initColor(arr) {
				for (var i = 0; i < arr.length; i++) {
					arr[i].className = 'circle';
				}
			}

			for (var i = 0; i < circle.length; i++) {
				circle[i].ind = i;
				circle[i].onclick = function(e) {
					index = this.ind;
					clrindex = this.ind;
					initColor(circle);
					circle[clrindex].className = 'circle guodong';
					var a = -1000 * index;
					slowMoveAnima(box2, a);
				}
			}
		</script>
	</body>
</html>
